import React from "react";
export default function (props) {
    const {
        progress,
        color = 'white',
        barColor = 'white',
        r = 40,
        text,
    } = props;
    const circumference = 2 * Math.PI * r;
    const progressLength = circumference * (100 - progress) / 100;
    const progressText = progress + '%';
    const w = r * 1.1 + 7;
    return (
        <svg style={{
            width: 2 * w,
            height: 2 * w,
        }}>
            <circle cx={w} cy={w} r={r} stroke="rgba(0,0,0,0.1)" strokeWidth="7" fill="transparent"/>
            <circle style={{
                transition: 'stroke-dashoffset 0.5s',
                transform: 'rotate(-90deg)',
                transformBox: 'fill-box',
                transformOrigin: '50% 50%',
            }} cx={w} cy={w} r={r} stroke={barColor} strokeLinecap={'round'} strokeWidth="7" fill="transparent"
                    strokeDasharray={circumference} strokeDashoffset={progressLength}/>
            <text x={w} y={w} textAnchor="middle" dy="7" fontSize={r*0.7} fill={color}>{text ?? progressText}</text>
        </svg>
    )
}